
import React, { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import png from '../../../util/img';
import './index.less';
import { Ilist, listStatic } from './interface';
import { useSelector } from 'react-redux';
import { RootState } from '@/redux';

const Header = () => {
  const [navList] = useState<Array<Ilist>>(listStatic);
  const headActive = useSelector((state: RootState) => state.ComState.headActive);
  const navigate = useNavigate();

  function renderNav() {
    return navList.map((item, index) => {
      return (
        <div onClick={toPath.bind(this, item)} className={`header-nav-item header-nav-${headActive == index ? 'active' : ''}`} key={index}>
          {item.label}
        </div>
      );
    });
  }
  function toPath(param): void {
    navigate(param.path, {
      replace: true
    });
  }
  return (
    <div className="header">
      <img src={png.logo} className="header-icon" />
      <div>
        携程前端训练营第六课-React+webpack+ts+less系统        
      </div>

      <div className="header-right">
        <div className="header-search"></div>
        <div className="header-nav">{renderNav()}</div>
      </div>
    </div>
  );
};

export default Header;
